<script setup lang="ts">
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { Edit, SwitchButton } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const userStore = useUserStore()

/** 用户信息 */
const userInfo = computed(() => userStore.userInfo)

/** 成长值百分比 */
const growthPercentage = computed(() => {
  if (!userInfo.value) return 0
  return Math.round((userInfo.value.growthValue / userInfo.value.maxGrowth) * 100)
})

/** 编辑资料 */
const handleEditProfile = () => {
  ElMessage.info('编辑资料功能开发中...')
}

/** 退出登录 */
const handleLogout = async () => {
  try {
    await ElMessageBox.confirm('确定要退出登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    userStore.logout()
    ElMessage.success('已退出登录')
    router.push('/')
  } catch {
    // 用户取消操作
  }
}
</script>

<template>
  <div class="user-info-card">
    <!-- 装饰背景 -->
    <div class="card-decoration">
      <div class="cloud cloud-1"></div>
      <div class="cloud cloud-2"></div>
      <div class="star star-1">✦</div>
      <div class="star star-2">✦</div>
      <div class="star star-3">✦</div>
    </div>

    <!-- 主内容 -->
    <div class="card-content">
      <!-- 左侧：头像 -->
      <div class="avatar-section">
        <el-avatar :size="100" :src="userInfo?.avatar" class="user-avatar" />
      </div>

      <!-- 中间：用户信息 -->
      <div class="info-section">
        <div class="name-level">
          <h2 class="nickname">{{ userInfo?.nickname }}</h2>
          <div class="member-badge">
            <span class="badge-icon">👑</span>
            <span class="badge-text">{{ userInfo?.memberLevel }}</span>
          </div>
        </div>

        <div class="stats-row">
          <div class="stat-item">
            <div class="stat-icon">💰</div>
            <div class="stat-info">
              <div class="stat-label">我的积分</div>
              <div class="stat-value">{{ userInfo?.points }}</div>
            </div>
          </div>

          <div class="stat-divider"></div>

          <div class="stat-item">
            <div class="stat-icon">📈</div>
            <div class="stat-info">
              <div class="stat-label">成长值</div>
              <div class="stat-value">
                {{ userInfo?.growthValue }}/{{ userInfo?.maxGrowth }}
              </div>
            </div>
          </div>
        </div>

        <!-- 成长值进度条 -->
        <div class="growth-progress">
          <el-progress
            :percentage="growthPercentage"
            :stroke-width="10"
            :show-text="false"
            class="progress-bar"
          />
          <div class="progress-tip">距离下一等级还需 {{ (userInfo?.maxGrowth || 0) - (userInfo?.growthValue || 0) }} 成长值</div>
        </div>
      </div>

      <!-- 右侧：操作按钮 -->
      <div class="action-section">
        <el-button
          type="primary"
          :icon="Edit"
          round
          class="action-button edit-button"
          @click="handleEditProfile"
        >
          编辑资料
        </el-button>
        <el-button
          :icon="SwitchButton"
          round
          class="action-button logout-button"
          @click="handleLogout"
        >
          退出登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.user-info-card {
  position: relative;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 24px;
  box-shadow: 0 8px 32px rgba(79, 172, 254, 0.25);
  overflow: hidden;
}

/* 装饰背景 */
.card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}

.cloud-1 {
  width: 120px;
  height: 60px;
  top: 20px;
  right: 10%;
  animation-delay: 0s;
}

.cloud-2 {
  width: 80px;
  height: 40px;
  bottom: 30px;
  left: 15%;
  animation-delay: 2s;
}

.star {
  position: absolute;
  color: rgba(255, 215, 0, 0.6);
  font-size: 24px;
  animation: twinkle 3s ease-in-out infinite;
}

.star-1 {
  top: 30px;
  left: 20%;
  animation-delay: 0s;
}

.star-2 {
  top: 60%;
  right: 15%;
  animation-delay: 1s;
}

.star-3 {
  bottom: 40px;
  right: 30%;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 主内容 */
.card-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 32px;
}

/* 头像区域 */
.avatar-section {
  flex-shrink: 0;
}

.user-avatar {
  border: 4px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.user-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

/* 信息区域 */
.info-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.name-level {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nickname {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.member-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
  color: #2c3e50;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.badge-icon {
  font-size: 16px;
}

/* 统计数据 */
.stats-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-icon {
  font-size: 28px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.85);
}

.stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
}

.stat-divider {
  width: 2px;
  height: 40px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
}

/* 成长进度条 */
.growth-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.progress-bar {
  width: 100%;
}

.progress-bar :deep(.el-progress-bar__outer) {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
}

.progress-bar :deep(.el-progress-bar__inner) {
  background: linear-gradient(90deg, #ffd700 0%, #ffed4e 100%);
  border-radius: 10px;
}

.progress-tip {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.9);
  text-align: right;
}

/* 操作区域 */
.action-section {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-button {
  font-weight: 600;
  padding: 12px 32px;
  font-size: 15px;
  transition: all 0.3s ease;
  min-width: 140px;
}

.edit-button {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  color: #4facfe;
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}

.edit-button:hover {
  background: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

.logout-button {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
  color: #ffffff;
  backdrop-filter: blur(10px);
}

.logout-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(255, 255, 255, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-info-card {
    padding: 24px;
  }

  .card-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .info-section {
    align-items: center;
  }

  .name-level {
    flex-direction: column;
    gap: 8px;
  }

  .nickname {
    font-size: 24px;
  }

  .stats-row {
    flex-direction: column;
    gap: 16px;
  }

  .stat-divider {
    display: none;
  }

  .action-section {
    width: 100%;
  }

  .action-button {
    width: 100%;
  }
}
</style>
